<template>
  <div class="image-viewer">
    <img v-if="imageDataUrl" :src="imageDataUrl" alt="项目图片" style="max-width: 90%; max-height: 90%" />
    <div v-else class="image-placeholder">
      <p>暂无图片内容</p>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { computed } from 'vue';

  const props = defineProps({
    imageContent: {
      type: String,
      default: '',
    },
  });

  const emit = defineEmits(['update:imageContent']);

  const imageDataUrl = computed(() => props.imageContent);

  const handleImageUpload = (event) => {
    const file = event.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = (e) => {
      emit('update:imageContent', e.target.result as string);
    };
    reader.readAsDataURL(file);
  };
</script>
<style scoped lang="less">
  .image-viewer {
    width: 100%;
    height: 100%;
    background: rgb(234, 234, 235);
    display: flex;
    align-items: center;
    justify-content: center;
    img {
    }
  }
</style>
